<style scoped>
    .ivu-table td.demo-table-info-column {
        background-color: #2db7f5;
        color: #fff;
    }
</style>
<template>
    <div>
        <Form inline class="form-search">
            <FormItem>
                <Input v-model="keyword" placeholder="供应商名称" style="width: 200px" @input="page = 1;
        SearchSupplier();" />
            </FormItem>

            <FormItem>
                <Button type="primary" @click="
  page = 1;
SearchSupplier();
        " icon="md-search">查询</Button>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="AddData" icon="md-add">新增</Button>
            </FormItem>
        </Form>
        <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle" :data="tableData" :height="tableHeight"></Table>
        <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100]" @on-change="
        (s) => {
          page = s;
          SearchSupplier();
        }
      " @on-page-size-change="
  (p) => {
    size = p;
    page = 1;
    SearchSupplier();
  }
" show-total show-sizer />
        <Modal :width="600" :footer-hide="true" v-model="modalData" title="新增" :mask-closable="false" draggable sticky>
            <supplieredit :Id="tempDataId" v-if="modalData" @on-success="onSuccess"></supplieredit>
        </Modal>
    </div>
</template>

<script>
    import { SearchSupplier } from '@/api/supplier'
    import supplieredit from './supplieredit.vue'
    export default {
        components: { supplieredit },
        name: 'customerchose',
        data() {
            return {
                total: 0,
                page: 1,
                size: 50,
                tableHeight: 400,
                status: -1,
                keyword: '',
                loadingTable: false,
                tableTitle: [
                    {
                        type: 'index',
                        title: '序号',
                        align: 'center',
                        width: 60,
                        render: (h, params) => {
                            return h('span', params.index + (this.page - 1) * this.size + 1)
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 100,
                        render: (h, params) => {
                            return h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleChose(params.row)
                                        }
                                    }
                                },
                                '选择'
                            )
                        }
                    },

                    {
                        key: 'Name',
                        title: '客户姓名',
                        width: 200,
                        align: 'center'
                    },
                    {
                        key: 'Balance',
                        title: '客户账目',
                        className: 'demo-table-info-column',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h(
                                'span',
                                {
                                    style: {
                                        color: params.row.Balance >= 0 ? '#19be6b' : '#ed4014',
                                        fontSize: '18px'
                                    }

                                },
                                params.row.Balance
                            )
                        }
                    },
                    {
                        key: ' ',
                        title: ' ',
                        align: 'center'
                    }

                ],

                tableData: [],
                modalData: false,
                tempDataId: 0
            }
        },
        computed: {},

        methods: {
            onSuccess(res) {
                this.modalData = false

                if (res == 1) {
                    this.SearchSupplier()
                }
            },
            handleChose(item) {
                this.$emit('on-success', item)
            },

            SearchSupplier() {
                let vm = this
                vm.loadingTable = true
                var reqData = {
                    page: vm.page,
                    size: vm.size,
                    keyword: vm.keyword
                }
                SearchSupplier(reqData).then((res) => {
                    vm.loadingTable = false
                    var data = res.data
                    if (data.StatusCode == 200) {
                        vm.tableData = data.Data.Items
                        vm.total = data.Data.TotalCount
                    } else {
                        vm.$Notice.error({
                            title: data.Errors
                        })
                    }
                })
            },
            AddData() {
                this.tempDataId = 0
                this.modalData = true
            }
        },
        mounted() {
            this.SearchSupplier()
        }
    }
</script>

<style>
</style>
